import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

void main() {
  runApp(const MaterialApp(
    home: Test_AfterLayout(),
    debugShowCheckedModeBanner: false,
  ));
}

class Test_AfterLayout extends StatefulWidget {
  const Test_AfterLayout({super.key});

  @override
  State<Test_AfterLayout> createState() => _Test_AfterLayoutState();
}

class _Test_AfterLayoutState extends State<Test_AfterLayout> {
  final GlobalKey _key1 = GlobalKey();
  final GlobalKey _key2 = GlobalKey();

  @override
  void initState() {
    super.initState();

    /// 方法1：WidgetsBinding.instance.addPostFrameCallback
    WidgetsBinding.instance.addPostFrameCallback((_) {
      debugPrint("👉 第1帧渲染完成，可以安全获取布局信息");
      _printWidgetSize(_key1, "绿色Box");
    });

    /// 方法2：SchedulerBinding.instance.addPostFrameCallback
    SchedulerBinding.instance.addPostFrameCallback((_) {
      debugPrint("👉 SchedulerBinding 的回调触发");
      _printWidgetSize(_key2, "红色Box");
    });
  }

  void _printWidgetSize(GlobalKey key, String name) {
    final RenderBox? box = key.currentContext?.findRenderObject() as RenderBox?;
    if (box != null) {
      final size = box.size;
      final offset = box.localToGlobal(Offset.zero);
      debugPrint("【$name】大小: $size, 位置: $offset");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("afterLayout 全属性案例")),
      body: Column(
        children: [
          Container(
            key: _key1,
            width: 150,
            height: 100,
            color: Colors.green,
            child: const Center(child: Text("绿色Box")),
          ),
          Container(
            key: _key2,
            width: 120,
            height: 80,
            color: Colors.red,
            child: const Center(child: Text("红色Box")),
          ),
          const Spacer(),

          /// 方法3：自定义 AfterLayoutMixin
          AfterLayout(
            callback: (Size size, Offset position) {
              debugPrint("👉 蓝色Box afterLayout: 大小=$size, 位置=$position");
            },
            child: Container(
              width: 180,
              height: 120,
              color: Colors.blue,
              child: const Center(child: Text("蓝色Box")),
            ),
          ),
        ],
      ),
    );
  }
}

/// 自定义 AfterLayout Widget
class AfterLayout extends StatefulWidget {
  final Widget child;
  final void Function(Size size, Offset position) callback;

  const AfterLayout({
    super.key,
    required this.child,
    required this.callback,
  });

  @override
  State<AfterLayout> createState() => _AfterLayoutState();
}

class _AfterLayoutState extends State<AfterLayout> {
  final GlobalKey _key = GlobalKey();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final RenderBox? box = _key.currentContext?.findRenderObject() as RenderBox?;
      if (box != null) {
        final size = box.size;
        final offset = box.localToGlobal(Offset.zero);
        widget.callback(size, offset);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(key: _key, child: widget.child);
  }
}


